<div class="bd-content">
<h1 class="bd-title" id="content">可见性</h1>
          <p class="bd-lead">通过可见性工具控制可见性，不会影响物件的实际空间。</p>
          <p>使用可见性通用类别设置元素的 <code class="highlighter-rouge">visibility</code>。这不会改变 <code class="highlighter-rouge">display</code> 值，并且有助于对大部分使用者隐藏内容，但是在屏幕阅读器仍然保存它们。 </p>

<p>依需求使用 <code class="highlighter-rouge">.visible</code> 或  <code class="highlighter-rouge">.invisible</code> 。</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"visible"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"invisible"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Class</span>
<span class="nc">.visible</span> <span class="p">{</span>
  <span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invisible</span> <span class="p">{</span>
  <span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// Usage as a mixin</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">visible</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
</div>
